<template>
  <div class="searchPage1">
    <!-- 搜索记录 和热门搜索 -->
    <div class="historyContainer">
      <!-- 历史记录 -->
      <div class="history" >
        <div class="historyTitle" v-if="searchTagsList.length">
          <span class="tit">历史记录</span>
          <van-icon name="delete-o" @click="clearTags"/>
        </div>
        <!-- 历史记录tag -->
        <div class="historyTag">
          <van-tag plain v-for="tagItem in searchTagsList" :key="tagItem" @click="toSearchPage3(tagItem)">{{tagItem}}</van-tag>
        </div>
      </div>
      <!-- 热门搜索 -->
      <div class="history list">
        <div class="historyTitle">
          <span class="tit">热门搜索</span>
        </div>
        <!-- 热门搜索tag -->
        <div class="historyTag">
          <van-tag plain 
          :text-color="hotItem === hotSearchList[0]?'#dd1a21':''" 
          v-for="(hotItem,index) in hotSearchList" 
          :key="index"
          @click="toSearchPage3(hotItem.keyword)"
          >{{hotItem.keyword}}</van-tag>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {saveTags,getTags,deleteTags} from '@/utils/search'
export default {
  name: "searchHistory",
  props: ['hotSearchList'],
  data(){
    return {
      searchTagsList: [],//历史记录
    }
  },
  methods: {
    // 删除历史记录
    clearTags(){
        deleteTags()
        this.getTagsList()
    },
    // 点击热门搜索tag标签跳转页面
    toSearchPage3(keyword){
      saveTags(keyword)
      this.$emit('initSearchResult',keyword)
    },
    // 
    //尝试从localStorage中获取searchTags
    getTagsList(){
        this.searchTagsList = getTags()
    },
  },
  mounted() {
      // 初始化界面时获取历史记录展示
      this.getTagsList()
  },
};
</script>

<style lang='less' scoped>
.historyContainer {
  .history {
    border-bottom: 10px solid #f4f4f4;
    padding-bottom: 20px;
    &.list {
      border: none;
    }
    .historyTitle {
      display: flex;
      justify-content: space-between;
      margin: 10px 15px;
      font-size: 14px;
      color: #333;
    }
    .historyTag {
      padding: 0 0 0 15px;
      display: flex;
      flex-wrap: wrap;
      .van-tag.van-tag--plain.van-tag--default {
        padding: 5px 7.5px;
        font-size: 12px;
        color: #666;
        margin: 0 16px 16px 0;
        border-radius: 4px;
      }
    }
  }
}
</style>